import { Component } from "react"
import Tab from "./components/Tab"

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      active: 0,
      list: [
        { name: "流行", content: "流行内容" },
        { name: "新款", content: "新款内容" },
        { name: "精选", content: "精选内容" }
      ]
    }
  }

  tabChange(index) {
    //  这里setState会引起Tab的刷新
    this.setState({
      active: index
    })
  }

  render() {
    const { list, active } = this.state
    return (
      <div>
        <Tab
          list={list}
          active={active}
          onChange={(index) => {
            this.tabChange(index)
          }}
        />
        <div className="content">{list[active]["content"]}</div>
      </div>
    )
  }
}
